<template>
    <div class="article">
        <!-- 文章标题与信息 -->
        <MainTitle :title="article.title">
        <div class='message-box'>
                <div class='message-box-item'>
                    <el-icon><UserFilled /></el-icon>
                    <p>{{article.author}}</p>
                </div>
                <div class='message-box-item'>
                    <el-icon><Clock /></el-icon>
                    <p>{{standDate}}</p>
                </div>
            </div>
        </MainTitle>
        <!-- 面包屑 -->
        <Breadcrumb />
        <!-- 正文 -->
        <Content :richtext='article.content'/>
    </div>
        
</template>

<script setup>
    import {ref, reactive, computed, onMounted, inject } from 'vue'
    import MainTitle from '@/components/MainTitle.vue'
    import Content from '@/components/Content.vue'
    import Breadcrumb from '@/components/Breadcrumb.vue'
    import axios from 'axios'
    const props = defineProps(['aid'])

    const { request } = inject('global')

    // 这里我没找到什么优雅的方法把接口请求来的数据优雅的转换成响应式数据,待优化
    const article = reactive({
        aid: null,
        author: null,
        content: null,
        datetime: null,
        uid: null,
        title: null,
    })

    const standDate = computed(() => {
        const regex = /(\d{4})-(\d{2})-(\d{2})/;
        if (!article.datetime) {
            return article.datetime
        }

        const match = article.datetime.match(regex);
        if (match) {
            // 获取捕获的组
            const year = match[1]; // 年
            const month = match[2]; // 月
            const day = match[3]; // 日
            
            // 转换为目标格式
            return `${year}年${parseInt(month)}月${parseInt(day)}日`;
        }
    })

    //在挂载组建的时候先将文章的内容全部加载好
    onMounted(() => {
        request.get('/article/' + props.aid)
        .then(resp => {
            article.aid = resp.data.data.aid;
            article.author = resp.data.data.author;
            article.content = resp.data.data.content;
            article.datetime = resp.data.data.datetime;
            article.uid = resp.data.data.uid;
            article.title = resp.data.data.title
        })
        .catch(err => {
            console.log(err)
        })
    })

</script>

<style src="@/styles/front-views/article.scss" scoped>
</style>